$("#province").on("change",function () {
    var city = $("#province").val();
    $("#area").html("");
    var html = " <option value=''>全部</option>";
    $("#area").append(html);
    getCity(city);
})
$("#city").on("change",function () {
    var city = $("#city").val();
    getArea(city);
})
function getCity(city){
    $.ajax({
        url: '/find/city',
        data: {city: city},
        type: 'POST',
        dataType: 'json',//返回的数据类型
        success: function (data) {
            var cityArray =  data.cityArray;
            $("#city").html("");
            var html = " <option value=''>全部</option>";
            $.each(cityArray, function (i, item) {
                html += "<option value='"+item.district_id+"'>" + item.district + "</option>";
            });
            $("#city").append(html);
        }
    })
}

function getArea(area){
    $.ajax({
        url: '/find/area',
        data: {area: area},
        type: 'POST',
        dataType: 'json',//返回的数据类型
        success: function (data) {
            var cityArray =  data.cityArray;
            $("#area").html("");
            var html = " <option value=''>全部</option>";
            $.each(cityArray, function (i, item) {
                html += "<option value='"+item.district_id+"'>" + item.district + "</option>";
            });
            $("#area").append(html);
        }
    })
}
$(document).ready(function(){
    ajaxList();
});
$(".search").click(function () {
    var data = $("#searchform").serialize();
    var start = $('.start_time').val();
    var end = $('.end_time').val();
    if(start==''||end==''){
        dshow('时间不能为空');
        return false
    }
    if(start > end){
        dshow('结束时间必须大于开始时间');
        return false
    }
    ajaxList(data);
});

function ajaxList(data) {
    $.ajax({
        url: '/find/echartsColumn',
        data: data,
        type: 'POST',
        dataType: 'json',//返回的数据类型
        success: function (data) {
            columnPie(data.totalArray.time,data.totalArray.value,data.totalArray.value1);
            $(".stay").html(data.totalArray.dog_seek_status1);
            $("#stay").html(data.totalArray.dog_seek_status1_num+'%');
            //
            $(".complete").html(data.totalArray.dog_seek_status2);
            $("#complete").html(data.totalArray.dog_seek_status2_num+'%');
            //
            $(".cancel").html(data.totalArray.dog_seek_status3);
            $("#cancel").html(data.totalArray.dog_seek_status3_num+'%');
            //
            // $(".again").html(data.totalArray.dog_money);
            $("#again").html(data.totalArray.dog_money+'%');
            //
            $(".release").html(data.totalArray.dog_number+'%');

        }
    })
}
function columnPie(dataX,dataY,dataZ) {
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        title: {
            text: '寻狗启事数量情况',
            x: 'left',

        },
        legend: {
            data:['累计寻狗数量 (主坐标轴)','新增寻狗数量 (次坐标轴)'],
            top:10,
            textStyle: {
                fontSize: 14,
                fontWeight: 'bolder',
            }// 主标题文字颜色
        },
        subtextStyle: {
        },
        dataZoom: [
            {
                show: true,
            },
            {
                type: 'inside',
            },
            {
                show: true,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 30,
                height: '80%',
                showDataShadow: false,
                left: '93%'
            }
        ],
        xAxis: {
            type: 'category',
            data: dataX
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: dataY,
            type: 'bar',
            name:'累计寻狗数量 (主坐标轴)',

            itemStyle:{
                normal:{
                    color:'#ff9933',
                    label:{
                        show:true,
                        position:'top'

                    }
                }
            }
        },
            {
                name:'新增寻狗数量 (次坐标轴)',
                type:'line',
                itemStyle : {  /*设置折线颜色*/
                    normal : {
                        color:'#4472c4',
                        label:{
                            show:true,
                            position:'top'
                        }
                    }
                },
                data:dataZ
            }
        ]
    };
    myChart.setOption(option);
}

